<template>
  <div>
    {{ mydata.num.toFixed(0) }}
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";
import gsap from "gsap";

const props = defineProps({
  value: {
    type: Number,
    default: 0
  }
})

const mydata = reactive({
  num: 0,
})

// 后台首页数据滚动动画
function AnimateToValue() {
  gsap.to(mydata, {
    duration: 0.5,
    num: props.value
  })
}
AnimateToValue()

// 监听数据是否发生变化，发生变化则重新执行数据增加动画
watch(() => props.value, () => AnimateToValue())

</script>